<style lang="less" scoped>
	.od-container{
		width: 100%;
		height: 100%;
		display: flex;
		background: #F0F0F0;
		flex-direction: column;
		.not-address{
			width: 100%;
			height: 40px;
			line-height: 40px;
			padding: 10px;
			display: flex;
            align-items: center;
            box-sizing: border-box;
            background: #fff;
            border-top:1px solid #F0F0F0;
            .info{
            	flex: 1;
            	font-size: 15px;
            	padding-left:10px;
            }
			img{
				width: 15px;
				height: 14px;
				display: block;
			}
			img:last-child{
				width: 7px;
				height: 12px;
			}
		}
		.od-dtail{
			flex:1;
			display: flex;
			height: 100%;
			margin-top: 10px;
			flex-direction: column;
			.od-dtail_tit{
				width: 100%;
				height: 40px;
				display: flex;
				font-size: 15px;
				align-items: center;
				background: #fff;
				padding: 10px;
				box-sizing: border-box;
				border-bottom:1px solid #F0F0F0;
				img{
					width: 6px;
					height: 6px;
					display: block;
					margin-right: 10px;
				}
			}
			.od-dtail_info{
				padding: 10px;
				box-sizing: border-box;
				background: #fff;
				display: flex;
				flex-direction: column;
				.pro{
					width: 100%;
					height: 100px;
					display: flex;
					align-items: center;
					padding-bottom: 10px;
					border-bottom: 1px solid #F0F0F0;
					.pro-icon{
						display: flex;
						align-content: center;
						img{
                            width:80px;
                            height:80px;
                            margin: 10px 20px;
                        }
					}
					.pro-desc{
						display: flex;
						flex: 1;
						flex-direction: column;
						font-size: 15px;
						.pro-desc_tit{
							
						}
					}
					.pro-desc_cart{
						width: 100%;
						display: flex;
						height: 30px;
						align-items: center;
						.cart-num{
							color: #7A1634;
							flex: 1;
						}
					}
				}
				.od-freight{
					width: 100%;
					height: 40px;
					display: flex;
					font-size: 15px;
					border-bottom: 1px ;
					align-items: center;
					border-bottom: 1px solid #F0F0F0;
					.od-freight_name{
						flex: 1;
					}
				}
				.od-message{
					width: 100%;
					display: flex;
					flex-direction: column;
					>span{
						display: inline-block;
						font-size: 13px;
						margin-top: 10px;

					}
					>textarea{
						width: 100%;
						font-size: 12px;
						height: 60px;
						padding: 10px 0px;
					}
				}
				
			}
		}
		.od-btn{
			width: 100%;
			height: 50px;
			display: flex;
			font-size: 15px;
			align-items: center;
			background: #fff;
			border-top: 1px solid #F0F0F0;
			.od-btn_price{
				flex: 1;
				padding-left: 10px;
				.tag-color{
					color: #7A1634;
				}
			}
			.od-btn_sub{
				width: 80px;
				height: 100%;
				display: flex;
				color: #fff;
				line-height: 40px;
				display: inline-block;
				background: #999;
				text-align: center;
				align-items: center;
			}
		}
		.addrsss-info{
			box-sizing: border-box;
			padding: 0px 0px 14px 23px;
			display: flex;
			background: #fff;
			box-sizing: border-box;
			flex-direction: column;
			height: 89px;
			position: relative;
			border-top: 1px solid #e5e5e5;
			.addrsss-info_u{
				display: flex;
				width: 100%;
				height: 40px;
				line-height: 48px;
				padding-right: 23px;
				box-sizing: border-box;
				align-items: center;
				padding-top: 5px;
				>img{
					width: 13px;
					height: 13px;
					margin-right: 12px;
				}
				>div{
					flex: 1;
					text-align: right;
				}
			}
			.addrsss-info_d{
				display: flex;
				width: 100%;
				align-items: center;
				>img{
					width: 15px;
					height: 14px;
				}
				.ar-info{
					flex: 1;
					font-size: 14px;
					color: #666;
					margin-left: 12px;
				}
				.ar-fang{
					width: 30px;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					img{
						width: 20px;
						height: 20px;
					}
				}
			}
		}
		.resBorderIcon{
			position: absolute;
			bottom: 0px;
			right: 0px;
			left: 0px;
			width: 100%;
			height: 2px;
		}
		.ar-fang>img{
			width: 7px !important;
			height: 12px  !important;
		}
	}
</style>
<template>
	<div class="od-container">
		<div class="not-address" @click="goAddress" v-if="!getAddress.info">
			<img :src="addressIcon"/>
			<div class="info">请选择地址</div>
			<img :src="deoIcon" />
		</div>
		<div class="addrsss-info" v-else>
			<div class="addrsss-info_u">
				<img :src="meIcon"/>
				<span class="text-14 text-black">收件人：{{getAddress.name}}</span>
				<div class="text-14 text-black">{{getAddress.number}}</div>
			</div>
			<div class="addrsss-info_d">
				<img :src="addressIcon"/>
				<div class="ar-info text-overflow__2">{{getAddress.info}}</div>
				<div class="ar-fang">
					<img :src="deoIcon"/>
				</div>
			</div>

			<img :src="resBorderIcon" class="resBorderIcon"/>
		</div>	
		<ul class="od-dtail">
			<div class="od-dtail_tit">
				<img :src="odIcon" />
				<span class="text-15">店铺名</span>
			</div>
			<div class="od-dtail_info">
				<div class="pro">
					<div class="pro-icon">
						<img mode='aspectFit'  src="http://img5.imgtn.bdimg.com/it/u=2623307874,1239411899&fm=27&gp=0.jpg"/>
					</div>
					<div class="pro-desc">
						<div class="pro-desc_tit text-overflow__2 text-14">西装西装西装西装西装西装西装西装西装西装西装西装西装西装西装西装西装</div>
						<span class="text-14">尺码：M</span>
						<div class="pro-desc_cart">
							<div class="cart-num text-14">￥999</div>
							<counter :count="count" @setCount="setCount"></counter>
						</div>
					</div>
				</div>
				<div class="od-freight">
					<div class="od-freight_name text-13">运费</div>
					<span>0.00</span>
				</div>
				<div class="od-message">
					<span class="text-13">留言</span>
					<textarea placeholder="[选填]可填写留言" ></textarea>
				</div>
			</div>
		</ul>
		<div class="od-btn">
			<div class="od-btn_price">合计：<span class="tag-color">￥999</span></div>
			<span class="od-btn_sub text-15" :class="{'tar-color':getAddress.info}" @click="goOrderDetail">去付款</span>
		</div>
	</div>
</template>

<script>
	import addressIcon from '@/assets/images/order/address.png'
	import deoIcon from '@/assets/images/order/deo.png'
	import odIcon from '@/assets/images/order/tuo.png'
	import counter from '@/components/counter/index.vue'
	import meIcon from '@/assets/images/meIcon.png'
	import resBorderIcon from '@/assets/images/order/reBorderIcon.png'
	
	import { mapGetters } from 'vuex'
	export default {
		title:'下单',
		
		data() {
			return {
				addressShow: false,
				addressIcon: addressIcon,
				deoIcon: deoIcon,
				odIcon: odIcon,
				count:2,
				meIcon:meIcon,
				resBorderIcon:resBorderIcon
			}
		},
		methods: {
			goOrderDetail(){
				if(!this.getAddress.info){
					wx.showToast({
		    			icon:'none',
		    			title:'请选择地址'
	    			})
				}
			},
			setCount(val) {
				this.count = val
			},
			goAddress(){
				 wx.navigateTo({
					url: '/pages/address-info/main'
				})
			}
		},
		components: {
			counter
		},
		computed: {
		...mapGetters([
			'getAddress'
		])
		
	},
		
		
	}
</script>

